<template>
  <van-overlay :show="show" @click="handleShow" :lock-scroll="false">
    <div class="modal">
      <div class="modal-con" @click.stop>
        <p class="title">北京银行积分兑换系统用户隐私保护说明</p>
        <p>本版本生效日期：【2022】年【03】月【28】日</p>
        <p>欢迎使用广州蓝鼎网络有限公司提供的北京银行用户积分兑换服务！
          本说明是积分兑换系统开发者广州蓝鼎网络有限公司（以下简称“开发者”）为处理你的个人信息而制定。</p>
        <p class="h1">1、开发者处理的信息</p>
        <p>1.1根据法律规定，开发者仅处理实现积分兑换系统功能所必要的信息。</p>
        <p>1.2为了注册、登录微信H5页面，开发者收集你的用户信息（不限于微信昵称、头像、性别、地区）（非必要选项）。</p>
        <p>1.3开发者收集你的手机号码，用于客服与你取得联系（非必要选项）。</p>
        <p>1.4开发者收集你的OpenID，用于微信H5页面程序给发放立减金（（必要选项）。</p>
        <p class="h1">2、你的权益</p>
        <p>2.1开发者承诺，除法律法规另有规定外，开发者对你的信息的保存期限应当为实现处理目的所必要的最短时间。 <br>
          关于积分兑换系统，你可以通过以下路径：小程序主页右上角“…”—“设置”—点击特定信息—点击“不允许”，撤回对开发者的授权。
        </p>
        <p>2.2 关于你的个人信息，你可以通过以下方式与开发者联系，行使查阅、复制、更正、删除等法定权利。</p>
        <p>公司名称：广州蓝鼎网络有限公司</p>
        <p>邮箱： landing0616@126.com</p>
        <p>地址：广州市天河区黄埔大道中662号1309室</p>
        <p>联系电话：400-8808-248</p>
        <p class="h1">3、开发者对信息的存储</p>
        <p>3.1开发者承诺，除法律法规另有规定外，开发者对你的信息的保存期限应当为实现处理目的所必要的最短时间。</p>
        <p class="h1">4、信息的使用规则</p>
        <p>开发者将会在本指引所明示的用途内使用收集的信息 <br>
          如开发者使用你的信息超出本指引目的或合理范围，开发者必须在变更使用目的或范围前，再次以邮件、短信方式告知并征得你的明示同意。
        </p>
        <p class="h1">5、信息对外提供</p>
        <p>
          5.1开发者承诺，不会主动共享或转让你的信息至任何第三方，如存在确需共享或转让时，开发者应当直接征得或确认第三方征得你的单独同意。</p>
        <p>5.2
          开发者承诺，不会对外公开披露你的信息，如必须公开披露时，开发者应当向你告知公开披露的目的、披露信息的类型及可能涉及的信息，并征得你的单独同意。</p>
        <p>
          你认为开发者未遵守上述约定，或有其他的投诉建议、或未成年人个人信息保护相关问题，可通过以下方式与开发者联系；或者向微信进行投诉。</p>

      </div>
    </div>
  </van-overlay>
</template>

<script setup>
import {defineProps, ref} from 'vue'
//子组件接收父组件的值
const props = defineProps({
  show: {
    type: Boolean,
    default: false
  }
})

const emits = defineEmits(['show'])
const handleShow = () => {
  emits("show")
}
</script>

<style lang="less" scoped>
.modal {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;

  .modal-con {
    margin: 0;
    padding: 24px;
    width: 660px;
    height: 920px;
    overflow-y: scroll;
    border-radius: 20px;
    background-color: #fff;
    box-shadow: 0 0px 20px #fc5a01;
    box-sizing: border-box;

    p {
      text-align: left;
      font-size: 18px;
      line-height: 1.8em;
      color: #333333;
    }

    .title {
      text-align: center;
      font-size: 28px;
      font-weight: bold;
    }

    .h1 {
      font-size: 20px;
      color: #000000;
      font-weight: bold;
    }
  }
}
</style>
